<template>
  <div class="layui-container" >
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="admin-login-background">
      <div class="layui-form login-form">
        <!--   <form class="layui-form" action="/login"> -->
        <div class="layui-form-item logo-title">
          <h1>宠物健康服务平台</h1>
        </div>
        <form action="/login" method="post" onsubmit="return check()"><br/><br/>
          <div class="layui-form-item">
            <label class="layui-icon layui-icon-username"></label>
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            <!--<input type="text" name="loginName" id="loginName" placeholder="请输入用户名" autocomplete="off" class="layui-input" >-->
          </div>
          <div class="layui-form-item" style="margin-top: 10px">
            <label class="layui-icon layui-icon-password"></label>
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            <!--<input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" class="layui-input" >-->
          </div>
          <div class="layui-form-item" style="margin-top: 10px;width: 100%">
            <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
            <!--<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login" >登 录</button>-->
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable indent */

  import router from '../router/index.js'
import axios from 'axios'
axios.defaults.withCredentials=true
export default {
  data () {
    return {
      form: {
        username: 'admin',
        password: 'admin'
      },
      input: '',
      imgSrc: '../../static/images/login.jpg',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () { // 传用户名和密码给后端,验证用户名和密码是否正确
      if (this.checkParam()) {
          return false
      }
      let params = new FormData()
      params.append('username', this.form.username)
      params.append('password', this.form.password)
      this.service
        .post('http://localhost:8080/pet/login', params,{headers: {'Content-Type': 'multipart/form-data'}})
        .then(res => {
          let data = res.data;
          if(data.code == 200){
            this.$message.success('登录成功')
            sessionStorage.setItem("userInfo", JSON.stringify(data.data));
          }else{
            this.$message.error(data.data)
            return false;
          }
          if(data.data.role_id == 0){
            this.$router.push('/home/index')
          }else {
            this.$router.push('/userHome/1')
          }
          window.location.reload();
        })
        .catch(error => {
          console.log(error);
        })


    },
    checkParam () {
      if (this.form.username.length < 1) {
        this.$message.error('用户名为空')
        return true
      }
      if (this.form.password.length < 1) {
        this.$message.error('密码为空')
        return true
      }
      return false
    }
  }
}
</script>
<style>
.login{
    width: 100vw;
    height: 100vh;
    background: #00b8ff;
}
.box-card{
    width: 480px;
    position: absolute;
    top:200px;
    left:50%;
    transform: translateX(-50%);
}
.box-card>.title{
    font-size: 28px;
}
.form-box{
    width: 350px;
}
.loginBtn{
    width: 100%;
}

.layui-container {width: 100%;height: 100%;overflow: hidden}
.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:180px;margin-top:-100px;}
.logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
.logo-title h1 {color:#34417c;font-size:25px;font-weight:bold;}
.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
.login-form .layui-form-item {position:relative;}
.login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
.login-form .layui-form-item input {padding-left:36px;}
.captcha {width:60%;display:inline-block;}
.captcha-img {display:inline-block;width:34%;float:right;}
.captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
</style>
